<template>
  <div id="app">
    <header>
      <nav>
        <div class="logo">{{ $t('message.youkeTutoringPlatform') }}</div>
        <div class="welcome-message" v-if="isLoggedIn">
          {{ $t('message.welcome') }}，{{ currentUserDisplayName }}
        </div>
        <div class="nav-links">
          <router-link to="/">{{ $t('message.home') }}</router-link>
          <router-link to="/admin" v-if="isAdministrator">{{ $t('message.adminPanel') }}</router-link>
          <router-link to="/profile" v-if="isLoggedIn">{{ $t('message.profile') }}</router-link>
          <router-link to="/login" v-if="!isLoggedIn">{{ $t('message.login') }}</router-link>
          <router-link to="/register" v-if="!isLoggedIn">{{ $t('message.register') }}</router-link>
          <a href="#" @click="logout" v-if="isLoggedIn">{{ $t('message.logout') }}</a>
          <select v-model="$i18n.locale" class="lang-select">
            <option value="zh">中文</option>
            <option value="en">English</option>
          </select>
        </div>
      </nav>
    </header>

    <main>
      <router-view />
    </main>

    <footer>
      <p>&copy; 2025 {{ $t('message.youkeTutoringPlatform') }}. {{ $t('message.allRightsReserved') }}</p>
    </footer>
  </div>
</template>

<script>
import { useAuthStore } from '@/stores/auth';

export default {
  name: 'App',
  computed: {
    isLoggedIn() {
      const authStore = useAuthStore();
      return !!authStore.token;
    },
    isAdministrator() {
      const authStore = useAuthStore();
      return !!authStore.token && authStore.user && authStore.user.roleId === 'ADMIN';
    },
    currentUserDisplayName() {
      const authStore = useAuthStore();
      if (authStore.user) {
        return authStore.user.username || authStore.user.email || authStore.user.userId || 'User';
      }
      return 'User';
    }
  },
  methods: {
    logout() {
      const authStore = useAuthStore();
      authStore.logout();
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100vh; /* 设置为视口全高度 */
  display: flex;
  flex-direction: column;
}

header {
  background-color: #3498db;
  color: white;
  padding: 1rem;
  flex-shrink: 0; /* 防止header被压缩 */
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.welcome-message {
  flex: 1; /* 占据中间空间 */
  text-align: center;
  font-weight: bold;
  color: #fff;
  font-size: 16px;
  margin: 0 20px; /* 左右留一些间距 */
}

.nav-links a {
  color: white;
  margin-left: 1rem;
  text-decoration: none;
}

.nav-links a:hover {
  text-decoration: underline;
}

main {
  flex: 1; /* 占据所有可用空间 */
  padding: 2rem 0;
  overflow: auto; /* 如果内容超出仍可滚动 */
}

footer {
  background-color: #ecf0f1;
  padding: 1rem;
  text-align: center;
  flex-shrink: 0; /* 防止footer被压缩 */
}
</style>

<style>
.lang-select {
  margin-left: 1rem;
  background-color: #3498db;
  color: white;
  border: none;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
}

.lang-select option {
  color: #2c3e50;
}

.admin-panel {
  color: #f39c12;
  font-weight: bold;
}
</style>